<template>
  <div class="page-box">
    <CustomizeTable :columns="columns" :fetch-data="fetchTableData" permission-prefix="partner:approve"
      :show-selection="true" :show-index="true" :export-file-name="'社区长审核'" :init-search-form="{}" @edit="handleEdit"
      @delete="handleDelete" @reset="reset" @status-change="handleStatusChange" ref="table">

      <!-- 搜索区域扩展 -->
      <template #searchExtend="{ form }">
        <el-form-item prop="approved_status">
          <el-select v-model="form.approved_status" placeholder="审核状态" clearable>
            <el-option v-for="item in approvedOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </template>

    </CustomizeTable>

    <!-- 审核弹窗 -->
    <el-dialog title="社区长详情" :visible.sync="dialogVisible" width="600px">
      <ReviewDetail v-if="currentRow" :formData="currentRow" @approve="handleApprove" />
    </el-dialog>

  </div>
</template>

<script>
  import CustomizeTable from "@/components/CustomizeTable.vue";
  import ReviewDetail from "./ReviewDetail.vue";
  import {
    SEX,APPROVAL_STATUS
  } from '@/constants/statusMap';
  export default {
    components: {
      CustomizeTable,
      ReviewDetail
    },
    data() {
      return {
        SEX,
        APPROVAL_STATUS,
        dialogVisible: false,
        currentRow: null,
        columns: [{
            prop: "id",
            label: "ID"
          },
          {
            prop: "user_id",
            label: "用户ID"
          },
          {
            prop: "real_name",
            label: "姓名"
          },
          {
            prop: "tel",
            label: "电话"
          },
          {
            prop: "id_card_number",
            label: "身份证号"
          },
          {
            prop: "sex",
            label: "性别",
            tag:true,
            tagConfig:SEX
          },
          {
            prop: "update_time",
            label: "提交时间"
          },
          {
            prop: "approved_status",
            label: "审批状态",
            tag: true, // 启用标签显示
            tagConfig: APPROVAL_STATUS
          },

        ],
        approvedOptions: [{
            id: -1,
            name: "全部"
          },
          {
            id: 0,
            name: "未审核"
          },
          {
            id: 1,
            name: "已审核"
          }
        ],
        searchForm: {

        },
      };
    },
    methods: {
      // 获取表格数据
      async fetchTableData(params = {}) {
        const postData = Object.assign({}, params, this.searchForm);
        try {
          const result = await this.$httpRequest.get('/communityLeader/approvalList', postData)
          console.log('--yyy--', result.list)
          return result
        } catch (e) {
          this.$message.error(e.message)
          throw e // 保持错误继续向上传递
        }

      },
      //重置
      reset() {
        this.searchForm.approved_status = -1;

      },
      // 编辑
      handleEdit(row) {
        // 打开编辑对话框逻辑
        this.currentRow = {
          ...row
        }; // 可深拷贝
        this.dialogVisible = true;
      },

      // 删除
      async handleDelete(row) {
        console.log("删除:", row);
      },

      // 状态变更
      async handleStatusChange(row) {
        console.log("状态变更:", row);
        this.$message.success("状态更新成功");
      },
      handleApprove(payload) {
        if (payload.approved_status === 2 && payload.approved_reason == '') {
          this.$message.error("拒绝通过需要备注原因")
          return false;
        }
        this.$httpRequest.post('/communityLeader/approval', payload).then(result => {
          if (result.code == 0) {
            this.$message.success('完成审核')
            this.$refs.table.refresh()
          } else {
            this.$message.error('审核失败')
          }
        }).catch(e => {
          this.$message.error(e.message)
        });
        this.dialogVisible = false;
      }
    },
  };
</script>

<style>
  .page-box {
    padding: 20px;

  }
</style>
